<template>
  <div class="my-page">
    <div class="user-info">
      <img class="avatar" src="/public/头像.jpg" alt="User Avatar">
      <h2 class="username">shipmaster</h2>
      <p class="user-status">在线</p>
    </div>
    <div class="menu-list">
      <div class="menu-item">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.TGZNVUUFzfVJTr8mhjVy1gHaG3?w=202&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="My Music">
        <p>我的音乐</p>
      </div>
      <div class="menu-item">
        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.kSUpRQMJ58s2qeWMLZNPiAHaHa?w=202&h=203&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="My Collection">
        <p>我的收藏</p>
      </div>
      <div class="menu-item">
        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C._0aU9WxU-fm_qbua7STLrgHaHa?w=172&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="Recent Play">
        <p>最近播放</p>
      </div>
      <div class="menu-item">
        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.six1d8Fvg4z2iaI_vEISSwHaHa?w=169&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="My Friends">
        <p>我的好友</p>
      </div>
      <div class="menu-item">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.6yZLpCxiLSL0whCsI3QDnQHaHv?w=152&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="My Friends">
        <p>音乐雷达</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyPage'
}
</script>

<style scoped>
.my-page {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.user-info {
  text-align: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.username {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.user-status {
  color: #00cc66;
}

.menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  justify-content: center;
}

.menu-item {
  text-align: center;
}

.menu-item img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}
</style>